<template>
  <div class="footer-box">
    <ul class="footerul">
      <li><router-link to="/Home" active-class="active">
      <!-- <img src="@/assets/img/01.svg" alt="" /> -->
      <i class="iconfont icon-shouye"></i>
      <div>首页</div>
      </router-link></li>
      <li><router-link to="/Sell" active-class="active">
      <!-- <img src="@/assets/img/02.svg" alt="" /> -->
      <i class="iconfont icon-temai"></i>
      <div>卖东西</div>
      </router-link></li>
      <li><router-link to="/shop" active-class="active">
      <!-- <img src="@/assets/img/03.svg" alt="" /> -->
      <i class="iconfont icon-gouwuche"></i>
      <div>购物车</div>
      </router-link></li>
      <li><router-link to="/My" active-class="active">
      <!-- <img src="@/assets/img/04.svg" alt="" /> -->
      <i class="iconfont icon-31wode"></i>
      <div>我的</div>
      </router-link></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Footer",
  data() {
    return {};
  },
};
</script>
<style scoped>
@import url(../assets/iconfont/iconfont.css);
.footer-box{
  background-color: #fff;
    height: .5rem;
    width: 100%;
    font-size: 12px;
    text-align: center;
}
.footer-box .footerul{
  height: 0.5rem;
  border-top: .01rem solid #666;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #666;
}
.footer-box .footerul li{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-box .footerul li div{
  margin: 0px 0;
}
.active{
  color: green;
}
.footer-box .iconfont{
  font-size: 28px;
}
</style>